<script>
export default{
    name:"header",
    props:{
        title:{
            require:true,
            type:String
        },
        backButton:{
            type:Boolean,
            value:false,
        },
        rightText:{
            type:String,
            value:'',
        },
        rightButton:{
            type:Boolean,
            value:false,
        }
    },
    methods: {
        backClick(){
            this.$emit('handeBackClick');
        },
        rightClick(){
            this.$emit('handeRightClick');
        }
    },
}
</script>
<template>
    <div id="header">
        <div class="header-contain">
            <div class="header-back">
                <img src="@/assets/image/btn_back.png" alt="" @click="backClick" v-show="backButton" />
            </div>
            <div class="header-title">
                {{ title }}
            </div>
            <div class="header-right">
                <span v-show="rightText!=''">{{ rightText }}</span>
                <img src="@/assets/image/qianjin.png" alt="" @click="rightClick" v-show="rightButton"/>
            </div>
        </div>
    </div>
</template>
<style lang="scss">
#header{
    width: 100%;
    height:v(120);
    position: relative;
    .header-contain{
        width: 100%;
        height:v(120);
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 v(48);
        box-sizing: border-box;
        background-color: #fff;
        .header-back{
            width: v(76);
            height: v(76);
        }
        .header-title{
            position: absolute;
            top: 0;
            left: 20%;
            width: 60%;
            height: v(120);
            text-align: center;
            line-height: v(120);
            font-size: v(34);
            color: #000;
            font-weight: 500;
            margin: 0 auto;
        }
        .header-right{
            display: flex;
            align-items: center;
            min-width: v(44);
            span{
                font-size: v(26);
                color: #000000;
            }
            img{
                width: v(44);
                height: v(44);
                margin-left: v(4);
            }
        }
    }
}
</style>